import React from 'react';
import './App.css';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const leftImg = require('./images/download_left.png')
const rightImg = require("./images/download_right.png")
const defaultImg = require("./images/app.png")
const androidImg = require("./images/android.png")
const iosImg = require("./images/ios.png")


const host = 'https://abouti.top/app'
const filehost = 'https://file.abouti.top'

export default class App extends React.Component {

  isAndroid = navigator.userAgent.indexOf("Android") > -1 || navigator.userAgent.indexOf("Adr") > -1;
  constructor(props) {
    super(props)
    this.state = {
      data: null,
      number: 0
    }
  }

  isWeixn() {
    //判断是否在微信浏览器中
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/) == "micromessenger") {
      return true;
    } else {
      return false;
    }
  }

  IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
      "SymbianOS", "Windows Phone",
      "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
      if (userAgentInfo.indexOf(Agents[v]) > 0) {
        flag = false;
        break;
      }
    }
    return flag;
  }
  componentDidMount() {

    let urlParams = window.location.search;

    if (urlParams.split('=').length < 2) {
      toast.error('url参数错误')
      return
    }
    if (urlParams.indexOf('type') == -1) {
      toast.error('url参数错误')
      return
    }

    let appType = urlParams.split('=')[1];

    let u = navigator.userAgent;
    let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //安卓端
    let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS端

    if (this.isWeixn()) {
      alert('请用系统浏览器打开')
      return
    }

    let systemType = isAndroid ? 1 : 2;

    let req = new Request(host + `/latestWithType/?systemType=${systemType}&appType=${appType}`, { method: 'GET' });
    fetch(req).then(res => res.json()).then(json => {
      console.log(json)

      if (json.data[1] == 0) {
        toast.info('未查询到数据')
      }

      if (json.code == 0) {
        this.setState({
          data: json.data[0],
          number: json.data[1]
        })
      } else {
        toast.info('未查询到数据')
      }
    }).catch(err => {
      toast.error('网络错误错误'+JSON.stringify(err))
    })

  }

  toInstall = () => {


  }

  render() {

    let list = this.state.data || [];
    let haveValue = list.length > 0;
    let value = haveValue ? list[0] : {}

    let fileSize = (value.file && value.file.size / 1000 / 1000 || 0).toFixed(2);
    let filePath = value.file && value.file.path;
    let plistPath = value.file && value.file.plistPath;

    // let iosPlist = filehost + 
    let androidPath = filehost + '/' + filePath;
    // let iosPath = 'itms-services://?action=download-manifest&url='+  filehost + '/' + plistPath
    let iosPath = 'itms-services://?action=download-manifest&url=https://file.abouti.top/publish/web/20200229/191-app.plist' //'itms-services://?action=download-manifest&url='+  filehost + '/' + plistPath

    console.log('value', value,androidPath,iosPath)

    if (!haveValue) {
      return <div>
        <ToastContainer hideProgressBar={false} position={'top-center'} hideProgressBar={true} />
      </div>
    }

    return (
      <div className="container-fluid">

        <img className="float-left" style={{ position: 'absolute', width: '10%', height: '60%', left: 0 }} src={leftImg} />
        <img className="float-right" style={{ position: 'absolute', width: '10%', height: '60%', right: 0 }} src={rightImg} />
        <img className="img-rounded" style={{ width: 80, height: 80 }} src={defaultImg} />
        <span className="d-flex mt-5 align-items-center" >
          <img style={{ height: 18, width: 18 }} src={this.isAndroid ? androidImg : iosImg} />
          <span className="ml-2" style={{ fontSize: 16, fontWeight: 400, color: 'darkslategrey' }} >{value.name}</span>
        </span>
        <div className="line" style={{ width: '90%', height: 0.5, backgroundColor: 'gray', margin: 20 }} />
        <div style={{ marginTop: 25, color: 'gray', textAlign: 'center' }}>{`测试版 - ${value.version || 0} (Build${value.build || 0}) - ${fileSize}MB`}</div>
        <div style={{ marginTop: 10, color: 'gray', textAlign: 'center', fontSize: 13 }}>更新于：{value.uploadTime}</div>

        <div className="card-body d-flex flex-row justify-content-center align-items-cente mt-5">
          {
            this.isAndroid ?
            <a href={androidPath} download={value.name} className="btn btn-primary download">下载安装</a>
            :
            <a href={iosPath} download={value.name} className="btn btn-primary download">点击安装</a>
          }
          
        </div>
        <div style={{ marginTop: 150, width: '90%' }}>
          <div className="line" style={{ width: '100%', height: 0.5, backgroundColor: 'gray' }} />
        </div>
        <div className="text-muted small mt-2">@{value.name}</div>
        <ToastContainer hideProgressBar={false} position={'top-center'} hideProgressBar={true} />
      </div>
    )
  }

}
